import {useNavigation} from '@react-navigation/native';
import {
  View,
  StyleSheet,
  TouchableOpacity,
  Text,
  Image,
  ScrollView,
} from 'react-native';
import {ThemeContext} from './ThemeContextProvider';
import {useContext} from 'react';
import {SafeAreaView} from 'react-native-safe-area-context';
export default function MenuLayout({active, children}) {
  const navigation = useNavigation();
  const {theme} = useContext(ThemeContext);
  const styles = StyleSheet.create({
    root: {
      width: '100%',
      height: '100%',
      flexDirection: 'row',
      backgroundColor: theme.bgGrey
    },
    menus: {
      width: 70,
      height: '100%',
      borderRightWidth: 1,
      borderColor: theme.dividerColor,
      alignItems: 'center',
      backgroundColor: theme.bgGrey,
    },
    main: {
      flex: 1,
    },
    logo: {
      height: 40,
      width: 40,
      borderRadius: 20,
      marginVertical: 20,
    },
    barItem: {
      height: 40,
      width: 70,
      justifyContent: 'center',
      alignItems: 'center',
      flexDirection: 'row',
    },
  });
  const TabBarButton = props => {
    return (
      <TouchableOpacity
        activeOpacity={0.6}
        onPress={() => {
          navigation.navigate(props.name);
        }}
        style={styles.barItem}>
        <Image
          source={active !== props.name ? props.inActiveIcon : props.activeIcon}
          style={{height: 16, width: 16, marginRight: 4}}></Image>
        <Text
          style={{
            color:
              active !== props.name ? theme.font2Color : theme.primaryColor,
          }}>
          {props.title}
        </Text>
      </TouchableOpacity>
    );
  };
  const routes = [
    {
      name: 'Cashier',
      title: '收银',
      activeIcon: require('../assets/icons/cashier_a.png'),
      inActiveIcon: require('../assets/icons/cashier_i.png'),
    },
    {
      name: 'Table',
      title: '桌位',
      activeIcon: require('../assets/icons/table_a.png'),
      inActiveIcon: require('../assets/icons/table_i.png'),
    },
    {
      name: 'Reserve',
      title: '预约',
      activeIcon: require('../assets/icons/reserve_a.png'),
      inActiveIcon: require('../assets/icons/reserve_i.png'),
    },
    {
      name: 'Order',
      title: '订单',
      activeIcon: require('../assets/icons/order_a.png'),
      inActiveIcon: require('../assets/icons/order_i.png'),
    },
    {
      name: 'Goods',
      title: '商品',
      activeIcon: require('../assets/icons/goods_a.png'),
      inActiveIcon: require('../assets/icons/goods_i.png'),
    },
    {
      name: 'Money',
      title: '财务',
      activeIcon: require('../assets/icons/money_a.png'),
      inActiveIcon: require('../assets/icons/money_i.png'),
    },
    {
      name: 'App',
      title: '应用',
      activeIcon: require('../assets/icons/app_a.png'),
      inActiveIcon: require('../assets/icons/app_i.png'),
    },
    {
      name: 'Check',
      title: '寄存',
      activeIcon: require('../assets/icons/check_a.png'),
      inActiveIcon: require('../assets/icons/check_i.png'),
    },
    {
      name: 'Call',
      title: '叫号',
      activeIcon: require('../assets/icons/call_a.png'),
      inActiveIcon: require('../assets/icons/call_i.png'),
    },
    {
      name: 'Set',
      title: '设置',
      activeIcon: require('../assets/icons/set_a.png'),
      inActiveIcon: require('../assets/icons/set_i.png'),
    },
  ];
  return (
    <SafeAreaView style={styles.root}>
      <View style={styles.menus}>
        <Image
          source={{
            uri: 'https://xiaochengxu-1259248756.cos.accelerate.myqcloud.com/uploads/20231011/ABKefFUCSPsjpwai.jpg',
          }}
          style={styles.logo}></Image>
        <ScrollView style={{flex: 1, padding: 0}}>
          {routes.map(item => {
            return <TabBarButton {...item} key={item.name}></TabBarButton>;
          })}
        </ScrollView>
      </View>
      <View style={styles.main}>{children}</View>
    </SafeAreaView>
  );
}
